/* socialshare iconfont */
@font-face
  font-family: "socialshare"
  src: url('../fonts/iconfont.eot?t=1478071541360')
  src: url('../fonts/iconfont.eot?t=1478071541360#iefix') format('embedded-opentype'), url('../fonts/iconfont.woff?t=1478071541360') format('woff'), url('../fonts/iconfont.ttf?t=1478071541360') format('truetype'), url('../fonts/iconfont.svg?t=1478071541360#iconfont') format('svg')
.social-share
  font-size: 16px
  font-style: normal
  .social-share-icon
    display: inline-block
    position: relative
    text-decoration: none
    outline: none
    margin: 4px
    width: 26px
    height: 26px
    border-radius: 50%
    line-height: 26px
    border: 1px solid #666
    color: #666
    text-align: center
    vertical-align: middle
    &:before
      font-family: "socialshare"!important
      -webkit-font-smoothing: antialiased
      -moz-osx-font-smoothing: grayscale
      text-rendering: auto
    &:hover
      background: #666
      color: #fff
  .icon-tencent
    color: #56b6e7
    border-color: #56b6e7
    &:before
      content: "\f07a"
    &:hover
      background: #56b6e7
  .icon-qq
    color: #56b6e7
    border-color: #56b6e7
    &:before
      content: "\f11a"
    &:hover
      background: #56b6e7
  .icon-weibo
    color: #ff763b
    border-color: #ff763b
    &:before
      content: "\f12a"
    &:hover
      background: #ff763b
  .icon-qzone
    color: #FDBE3D
    border-color: #FDBE3D
    &:before
      content: "\f08a"
    &:hover
      background: #FDBE3D
  .icon-douban
    color: #33b045
    border-color: #33b045
    &:before
      content: "\f10a"
    &:hover
      background: #33b045
  .icon-linkedin
    color: #0077B5
    border-color: #0077B5
    &:before
      content: "\f01a"
    &:hover
      background: #0077B5
  .icon-facebook
    color: #44619D
    border-color: #44619D
    &:before
      content: "\f03a"
    &:hover
      background: #44619D
  .icon-google
    color: #db4437
    border-color: #db4437
    &:before
      content: "\f04a"
    &:hover
      background: #db4437
  .icon-twitter
    color: #55acee
    border-color: #55acee
    &:before
      content: "\f06a"
    &:hover
      background: #55acee
  .icon-diandian
    color: #307DCA
    border-color: #307DCA
    &:before
      content: "\f05a"
    &:hover
      background: #307DCA
  .icon-heart:before
    content: "\f20a"
  .icon-like:before
    content: "\f00a"
  .icon-wechat
    position: relative
    color: #7bc549
    border-color: #7bc549
    &:before
      content: "\f09a"
    &:hover
      background: #7bc549
      .wechat-qrcode
        display: block
    .wechat-qrcode
      display: none
      border: 1px solid #eee
      position: absolute
      z-index: 9
      top: -205px
      left: -84px
      width: 200px
      height: 192px
      color: #666
      font-size: 12px
      text-align: center
      background-color: #fff
      box-shadow: 0 2px 10px #aaa
      -webkit-tansition: all 350ms
      -moz-transition: all 350ms
      transition: all 200ms
    .wechat-qrcode.bottom
      top: 40px
      left: -84px
      &:after
        display: none
    .wechat-qrcode h4
      font-weight: normal
      height: 26px
      line-height: 26px
      font-size: 12px
      background-color: #f3f3f3
      margin: 0
      padding: 0
      color: #777
    .wechat-qrcode .qrcode
      width: 105px
      margin: 10px auto
    .wechat-qrcode .qrcode table
      margin: 0!important
    .wechat-qrcode .help p
      font-weight: normal
      line-height: 16px
      padding: 0
      margin: 0
    .wechat-qrcode:after
      content: ''
      position: absolute
      left: 50%
      margin-left: -6px
      bottom: -13px
      width: 0
      height: 0
      border-width: 8px 6px 6px 6px
      border-style: solid
      border-color: #fff transparent transparent transparent